<template>
	<view class="app" v-if=" orderInfo.goods_lists">
		<view class="top">
			<text>
				<image src="../../../static/images/dui.png" mode=""></image>
				官方正品
			</text>
			<text>
				<image src="../../../static/images/dui.png" mode=""></image>
				7天无理由退货
			</text>
			<text>
				<image src="../../../static/images/dui.png" mode=""></image>
				价格保护
			</text>
			<text>
				<image src="../../../static/images/dui.png" mode=""></image>
				全场包邮
			</text>
		</view>

		<view class="address">
			<view>
				<image src="../../../static/images/dizhi.png" mode=""></image>
				<text>点击选择收货地址</text>
			</view>
		</view>

		<view class="commodity">
			<view class="commodity_item" v-for="item in orderInfo.goods_lists.shoppingCartItemList"
				:key="item.shoppingcartId">
				<view class="Single">
					<view class="image">
						<image :src="item.skuImage" mode=""></image>
					</view>
					<view class="Price">
						<view>{{item.productName}}</view>
						<view>
							<!-- {{item.skuAttrList.value}} -->
						</view>
						<view>
							<text>￥{{item.price/100}}</text>
							<text>x{{item.buyNumber}}</text>
						</view>
					</view>
				</view>
				<view class="but" v-if="item.affShoppingCartList">
					<view class="affList" v-for="(aff,index) in item.affShoppingCartList" :key="aff.activityId">
						<text class="aff">赠品</text>
						<text>{{aff.productName}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="display-box">
			<view class="">
				<text>商品金额</text>
				<text>￥{{ orderInfo.goods_lists.productPrice/100}}</text>
			</view>
			<view class="">
				<text>运费</text>
				<text>+￥{{ orderInfo.goods_lists.reducePrice}}</text>
			</view>
		</view>

		<view class="display-box">
			<view class="button" @click="toggle('bottom')">
				<text class="button-text">发票</text>
				<text>不开发票 ></text>
			</view>
			<view class="button" @click="toggle('bottom')">
				<text class="button-text">优惠卷</text>
				<text>暂无可用 ></text>
			</view>
			<view class="button" @click="toggle('bottom')">
				<text class="button-text">极米积分</text>
				<text>优惠0元 ></text>
			</view>
			<view class="button" @click="toggle('bottom')">
				<text class="button-text">订单备注</text>
				<text>选填给商家留言 ></text>
			</view>
		</view>
		<view class="payment">
			<view class="butt">
				<view>
					<text>合计:</text>
					<text>￥{{Number( orderInfo.goods_lists.productPrice) / 100}}</text>
				</view>
				<view>
					已减:￥{{ orderInfo.goods_lists.reducePrice}}
				</view>
			</view>
			<view>
				<button type="primary" size="mini" @click="submitTo">
					提交订单
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		flowCheck,
		createOrder, // 提交
	} from "../../../api/auth.js";
	import {
		ref
	} from 'vue';
	// 创建订单信息
	const orderInfo = ref({})
	// 创建订单
	function flow() {
		flowCheck().then(res => {
			orderInfo.value = res.data
			console.log(res)
		})
	}
	flow()
	// 提交订单
	function submitTo() {
		console.log(111)
		uni.showLoading({
			title: '计算中...'
		})
		var data = {
			"activityId": "",
			"skuId": "",
			"giftIds": "",
			"reduceActivityId": "",
			"isPreSell": false,
			"couponCode": "",
			"invoiceType": 0,
			"invoicePayee": "",
			"invoicePayeeType": 1,
			"invoiceTaxCode": "",
			"postscript": "",
			"receiveAddressDesId": "SjJmS3NNRkUrZ09YMDNHaXl5WFVwUT09",
			"userCouponCode": "",
			"xgimiCoin": 0,
			"checkRecommendCode": false,
			"payPrice": 579700,
			"orderFrom": "H5",
			"feedback": "",
			"buyFrom": "",
			"recommendCode": null
		}
		data.payPrice = orderInfo.value.goods_lists.totalPrice;
		// 发起创建订单请求
		// 请求成，跳转到支付页面
		createOrder(data)
			.then(res => {
				uni.hideLoading();
				uni.navigateTo({
					url: '/cart/pages/payment/payment?orderno=' + res.data
				})
			})
	}
</script>

<style lang="scss">
	.app {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 110rpx;

		// 底部选项区
		.display-box {
			width: 84%;
			min-height: 60rpx;
			background-color: #fff;
			margin: 10px auto;
			border-radius: 10px;
			padding: 8px 17px;
			// padding-bottom: 90rpx;

			.button {
				height: 90rpx;
				font-weight: 500;

				text {
					&:nth-child(1) {
						font-size: 15px;
						font-weight: 500;
						color: #2a2b2b;
					}

					&:nth-child(2) {
						color: #2a2b2b;
						font-size: 13px;
						padding-right: 9px;
						font-weight: 500;

					}
				}
			}

			view {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;

				text {
					&:nth-child(2) {
						font-size: 15px;
						color: #f6462a;
						font-weight: 600;
					}
				}
			}
		}


		// 商品列表
		.commodity {
			width: 100%;

			.commodity_item {
				width: 92%;
				margin: 0 4%;
				min-height: 79px;
				background-color: #fff;
				margin-bottom: 20px;
				padding: 8px 10px;
				box-sizing: border-box;
				border-radius: 20rpx;
			}

			.Single {
				width: 84%;
				min-height: 79px;
				display: flex;
				margin: 10px 0;
				border-radius: 10px;

				.image {

					uni-image {
						width: 93px !important;
						height: 93px !important;

						iamge {
							width: 100%;
						}
					}

				}

				.Price {
					min-width: 70%;
					padding-left: 40rpx;
					padding-top: 40rpx;

					view {
						&:nth-child(1) {
							color: #000 !important;
							font-size: 17px;
							line-height: 1;
							font-weight: 700;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						&:nth-child(2) {
							margin-top: 4px;
							line-height: 17px;
							height: 17px;
							font-size: 13px;
							color: #b6b6ba !important;
						}

						&:nth-child(3) {
							font-size: 15px;
							color: #fd4711 !important;
							display: flex;
							justify-content: space-between;
							font-weight: 700;

							text {
								&:nth-child(2) {
									font-weight: 500;
									color: #acacac !important;
									font-size: 13px;
								}
							}
						}
					}
				}
			}

			.but {
				width: 100%;
				padding: 0rpx 10rpx;
				border-top: 1rpx solid #e8e8e8;
				font-size: 26rpx;
				padding-bottom: 30rpx;

				.affList {
					margin-top: 30rpx;
				}

				.aff {
					background-color: #fdeeed;
					padding: 8rpx;
					color: #7faafc;
					margin-right: 15rpx;
				}
			}
		}


		// 顶部
		.top {
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #ccc;
			align-items: center;

			text {
				// display: flex;
				font-size: 25rpx;
				color: #ccc;

				image {
					margin-top: 5rpx;
					width: 12px;
					height: 12px;
				}
			}
		}

		// 收货地址
		.address {
			width: 84%;
			min-height: 79px;
			padding-left: 17px;
			padding-right: 17px;
			background-color: #fff;
			padding-top: 8px;
			padding-bottom: 8px;
			margin: 20rpx auto;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;

				image {
					width: 21px;
					height: 21px;
					margin-right: 10px;
				}

				text {
					font-size: 42rpx;
					font-weight: 600;
				}
			}
		}

		// 底部
		.payment {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			padding: 6px 2%;
			width: 96%;

			.butt {
				view {
					&:nth-child(1) {
						line-height: 15px;
						font-weight: 700;

						text {
							&:nth-child(1) {
								font-size: 15px;
								color: #2a2b2b;
							}

							&:nth-child(2) {
								color: #fd4711;
							}
						}
					}

					&:nth-child(2) {
						font-size: 11px;
						color: #6b6d6d;
					}
				}
			}
		}
	}
</style>